React Native Reanimated দিয়ে Complex Animations তৈরি

React Native-এ Reanimated একটি শক্তিশালী লাইব্রেরি যা আপনাকে complex animations তৈরি করতে সহায়ক। এটি React Native এর জন্য উন্নত এবং উচ্চ-পারফরম্যান্স অ্যানিমেশন প্রদান করে, যা UI rendering এর পারফরম্যান্সে খুবই উন্নতি আনে। Reanimated-এর মাধ্যমে আপনি gesture-based animations, scroll-based animations, এবং complex sequence animations তৈরি করতে পারবেন।

React Native Reanimated 2 এর নতুন ফিচারগুলি, যেমন worklets, shared values, এবং hooks আপনাকে আরও বেশি নিয়ন্ত্রণ দিতে সহায়ক হয় এবং complex animations সহজেই তৈরি করা সম্ভব হয়।

React Native Reanimated 2 ইনস্টলেশন

Reanimated 2 ব্যবহার করতে হলে প্রথমে লাইব্রেরিটি ইনস্টল করতে হবে। এটি সহজেই npm বা yarn এর মাধ্যমে ইনস্টল করা যায়।

npm install react-native-reanimated

অথবা,

yarn add react-native-reanimated

Post-installation steps:

React Native 0.65 এবং তার পরবর্তী সংস্করণগুলির জন্য আপনাকে কিছু post-installation steps অনুসরণ করতে হবে। আপনি এই steps গুলি Reanimated official documentation থেকে পেতে পারেন।

React Native Reanimated 2 এর মূল ফিচারগুলি

1. Shared Values
   Shared values আপনাকে একাধিক worklets এর মধ্যে ডেটা শেয়ার করতে সহায়ক, যা একাধিক কম্পোনেন্টে একই অ্যনিমেশন কোড শেয়ার করতে সাহায্য করে।
2. Worklets
   Worklet হল একধরনের কোড ব্লক যা UI thread-এ রান করে এবং animation-এ real-time ফিডব্যাক দেয়। এটি অ্যাপের পারফরম্যান্সে বড় ধরনের সুবিধা প্রদান করে।
3. Animated Styles
   Reanimated আপনাকে animation-এর সময় styles পরিবর্তন করার অনুমতি দেয়। আপনি একাধিক স্টাইল ইফেক্ট ব্যবহার করে layout animation তৈরি করতে পারেন।
4. Gesture Handling
   Reanimated-এ gesture-based animations তৈরি করা সম্ভব, যেমন dragging বা swiping।

Complex Animation তৈরি করার উদাহরণ

এখানে একটি complex animation তৈরি করা হবে, যেখানে একটি বক্স স্ক্রীনে drag করা যাবে এবং সেটি স্ক্রীন সাইজ অনুযায়ী bounce করবে।

প্রথম উদাহরণ: Drag and Bounce Animation

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Animated, { Easing, useSharedValue, useAnimatedStyle, withSpring, withDelay, withRepeat } from 'react-native-reanimated';

const App = () => {
  const translateX = useSharedValue(0); // Shared value for translation

  // Animated style for drag animation
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: withSpring(translateX.value, { damping: 2, stiffness: 100 }) }, // Apply spring animation
      ],
    };
  });

  // Handling gesture event
  const onGestureEvent = (event) => {
    translateX.value = event.translationX; // Set translation value on drag
  };

  return (
    <View style={styles.container}>
      <Animated.View
        style={[styles.box, animatedStyle]} // Applying animated style
        onStartShouldSetResponder={() => true}
        onResponderMove={onGestureEvent} // Dragging event
      >
        <Text style={styles.text}>Drag Me!</Text>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'skyblue',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
  },
  text: {
    fontSize: 16,
    color: '#fff',
  },
});

export default App;

ব্যাখ্যা:

1. useSharedValue: এই হুক ব্যবহার করা হয়েছে translateX নামক একটি শেয়ারড ভ্যালু তৈরি করতে, যা কম্পোনেন্টের ভেতরে ডেটা শেয়ার করতে সহায়ক।
2. withSpring: translateX পরিবর্তন করার জন্য এটি একটি spring animation ব্যবহার করছে, যা বক্সটিকে সহজভাবে স্ক্রীনে চলন্ত অবস্থায় রাখে এবং শেষের দিকে "bounce" করায়।
3. onResponderMove: এই ইভেন্ট হ্যান্ডলার দিয়ে আপনি বক্সটিকে স্ক্রীনে ড্র্যাগ করতে পারবেন।

আরেকটি উদাহরণ: Sequence Animation (Fade In and Scale)

এখানে, একটি বক্স প্রথমে fade in হবে এবং তারপর scale up হবে।

import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Animated, { Easing, useSharedValue, useAnimatedStyle, withDelay, withSequence, withSpring } from 'react-native-reanimated';

const App = () => {
  const opacity = useSharedValue(0); // Starting opacity
  const scale = useSharedValue(0.5); // Starting scale

  useEffect(() => {
    // Sequence of animations
    opacity.value = withSequence(
      withDelay(500, withSpring(1, { damping: 2, stiffness: 100 })), // Fade In
      withSpring(0.8) // Scale animation after fade
    );
    scale.value = withSpring(1); // Scale to 1
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
      transform: [{ scale: scale.value }],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyle]}>
        <Text style={styles.text}>Fade and Scale Animation</Text>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'coral',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
  },
  text: {
    fontSize: 16,
    color: '#fff',
  },
});

export default App;

ব্যাখ্যা:

1. withSequence: এটি একাধিক অ্যানিমেশনকে সিরিয়ালি একে একে চালাতে ব্যবহৃত হয়। এখানে প্রথমে fade-in এবং পরে scale-up অ্যানিমেশন হয়েছে।
2. withDelay: এই ফাংশনটি একটি অ্যানিমেশন শুরু হওয়ার আগে কিছু বিলম্ব যোগ করে। এখানে, ৫০০ মিলিসেকেন্ডের বিলম্ব পরে অ্যানিমেশন শুরু হবে।

React Native Reanimated দিয়ে Complex Animations এর সুবিধা:

• High Performance: Reanimated UI থ্রেডে রান করে, ফলে অ্যানিমেশনগুলি স্মুথ এবং দ্রুত হয়।
• Flexibility: আপনি gesture-based অ্যানিমেশন, scroll-based অ্যানিমেশন, এবং sequence-based অ্যানিমেশন সহজেই তৈরি করতে পারবেন।
• Worklets: Worklets ব্যবহার করে আপনি UI থ্রেডে রান করার মতো কোড তৈরি করতে পারেন যা পারফরম্যান্সকে আরও ভালো করে তোলে।

সারাংশ

React Native Reanimated ব্যবহার করে আপনি অত্যন্ত complex animations তৈরি করতে পারবেন। এটি আপনাকে পারফরম্যান্সে উন্নতি এনে দেয় এবং রেসপন্সিভ এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করতে সাহায্য করে। useSharedValue, useAnimatedStyle, এবং worklets ব্যবহার করে আপনি নিজের অ্যাপ্লিকেশনে বিভিন্ন ধরণের অ্যানিমেশন খুব সহজে এবং স্মুথলি প্রয়োগ করতে পারেন।